import React from 'react';
import { useNavigate } from 'react-router-dom';
import {
  NavBar,
  Image,
  Space,
  Card,
  List
} from 'antd-mobile';
import './About.css';

const About = () => {
  const navigate = useNavigate();

  // 返回上一页
  const back = () => {
    navigate(-1);
  };

  return (
    <div className="about-page">
      <NavBar onBack={back}>关于我们</NavBar>
      
      <div className="about-container">
        <div className="app-info">
          <div className="app-logo">
            <Image src="https://gw.alipayobjects.com/zos/bmw-prod/b874caa9-4458-412a-9ac6-a61486180a62.svg" width={80} height={80} fit="contain" />
          </div>
          <div className="app-title">轻量电商</div>
          <div className="app-version">版本 1.0.0</div>
        </div>
        
        <Card className="about-card">
          <div className="card-title">应用简介</div>
          <div className="card-content">
            <p>轻量电商是一款基于React开发的移动端电商应用，提供商品浏览、搜索、收藏、购物车、订单管理等功能。</p>
            <p>我们致力于为用户提供简洁、高效、安全的购物体验。</p>
          </div>
        </Card>
        
        <Card className="about-card">
          <div className="card-title">联系我们</div>
          <List>
            <List.Item>客服电话: 400-123-4567</List.Item>
            <List.Item>客服邮箱: support@example.com</List.Item>
            <List.Item>工作时间: 周一至周日 9:00-21:00</List.Item>
          </List>
        </Card>
        
        <Card className="about-card">
          <div className="card-title">版权信息</div>
          <div className="card-content">
            <p>© 2025 轻量l11234_rj 版权所有</p>
            <p>本应用所有内容均为演示用途，如有侵权请联系我们删除</p>
          </div>
        </Card>
        
        <div className="copyright">
          Powered by React & Ant Design Mobile
        </div>
      </div>
    </div>
  );
};

export default About; 